Day14 【前端入門，入門前端】CSS class 與 id

2023 iThome 鐵人賽

DAY 14

Modern Web

前端入門，入門前端系列第 14 篇

15th鐵人賽

overcast3579

2023-09-29 22:14:56

179 瀏覽

分享至

前端入門，入門前端。學前端，如標題簡單。

嗨大家好，
昨天我們認識了與文字有關的樣式，在今天開始之前，請大家先建好基本檔案，並一起來想想一個問題。
昨天我們都知道可以直接在 <style></style> 內寫出標籤，就可以選定我們想要改變哪個標籤的樣式。
假設今天我的內容是這樣

<body>
    <p>我是要被拿來當實驗品的文字</p>
    <p>我是不想變色的文字</p>
</body>

如果我想把<p>我是要被拿來當實驗品的文字</p> 這段字放大成24px，用昨天學到的方法會是，

    <style>
        p {
            font-size: 24px;
        }
    </style>

用 live server 觀察看看吧

是變成24px了，但是另一個p標籤內的字，也變成24px了。
為什麼會這樣呢？
因為我們指定要變成24px的是p標籤，所以全部的p標籤都會變成24px。那要怎麼解決這個問題呢？

認識 class

來聽聽我之前當老師的故事找找靈感吧。
某一年，我們班上有兩位宗翰(這好像是菜市場名，常常遇到宗翰)，班上有兩位宗翰麻煩的地方在於，每次叫宗翰他們都不知道我到底在叫誰。其實要解決這個問題並不難，只要連名帶姓叫就好了。可是偏偏我們班兩位宗翰都姓蔡，這真的令人頭痛了。後來我只好給他們取綽號，一位叫小蔡、一位叫大蔡，才解決這個問題。

那我們剛剛遇到的好像也是一樣的狀況，兩個都是p標籤，所以當瀏覽器看到 <style></style> 裡面所寫的p標籤，並不知道我們想要指定的是哪個p標籤，所以就會把全部的p標籤都套用這個樣式。
解決這問題的方法，就跟我解決班上的問題是一樣的，只要給這兩個p標籤不一樣的「綽號」，然後在 <style></style> 裡面寫說要指定哪個綽號給樣式，就解決問題了。
要怎麼給綽號呢？

給綽號的方式，就是在標籤中，給予一個 class 屬性。
class=""

<body>
    <p class="aaa">我是要被拿來當實驗品的文字</p>
    <p class="bbb">我是不想變色的文字</p>
</body>

接著，我們在 <style></style> 中，指定我們要的標籤。現在每個標籤都有各自的綽號了(class)，我們在 <style></style> 中就要改成指定綽號(class)，不能再指定標籤了。怎麼做呢？

像下面這樣寫出要指定的綽號(class)，class前面會多一個「.」。這是為了告訴瀏覽器，我後面寫的是class，請你去找這個class名稱的。

    <style>
        .aaa {
            font-size: 24px;
        }
    </style>

看看live server 是不是成功了

雖然成功了，但我們還有最後一件要注意的事情。
我們的class名稱不可以亂取。像aaa、bbb這就是亂取的，他沒有辦法幫我們藉由這個class名稱來知道，關於這個標籤或是樣式的任何資訊。我們可以想想周邊朋友的綽號。如果有人綽號是竹竿，那我們可以推論，這個人身材有很大機率偏瘦。如果有人綽號是小黑，那我們可以推論，這個人膚色可能偏黑。
所以我們幫標籤取綽號也是一樣的道理，希望可以讓別人在看到class名稱時，就可以大概有個推論，這個標籤是做什麼的，或是這個標籤的樣式會是什麼。(未來進入職場，每間公司規定取class名稱的方式會不一樣，我們現在只是剛練開始練習，所以只要不是取一些沒有意義的名稱，就可以了。)

如果是我，我可能會這樣修改：

    <style>
        .change_font {
            font-size: 24px;
        }
    </style>
    <body>
        <p class="change_font">我是要被拿來當實驗品的文字</p>
        <p class="no_change">我是不想變色的文字</p>
    </body>

這邊先做個小統整：
找標籤 -> 直接打標籤名稱
找class -> 前面要加「.」，然後再打指定的class名稱

認識 id

讓我們繼續說說班上的故事。後來下學期班上來了一位轉學生，他竟然也叫蔡宗翰，雖然有點令人頭痛，但沒關係畢竟我們可以用綽號解決這個問題。於是我問了新來的蔡宗翰綽號，他說他的綽號叫小蔡。好吧，連綽號都一樣，真的頭痛了，該怎麼辦呢？後來我發現了，這三位宗翰在班上的座號都是不一樣的，因為每個座號都一定是唯一的。於是我就用座號來叫他們，終於一勞永逸的解決了這個問題，就算全班都改名蔡宗翰也不用擔心了。

回到程式碼的編寫上，我們除了給每個標籤加上class以外還可以給每個標籤加上一個id屬性。這個id特別的地方就在於它是唯一的，整個頁面上不可以有人有重複的id。

像下面這樣就是可以的，class名稱一樣沒有問題，id都不一樣沒有問題。

    <body>
        <p class="change_font" id="first">我是要被拿來當實驗品的文字</p>
        <p class="no_change" id="second">我是不想變色的文字</p>
        <p class="change_font" id="third">我也要加大</p>
    </body>

像下面這樣就是不可以的，class名稱一樣沒有問題，id有重複是不可以的。

    <body>
        <p class="change_font" id="first">我是要被拿來當實驗品的文字</p>
        <p class="no_change" id="second">我是不想變色的文字</p>
        <p class="change_font" id="third">我也要加大</p>
        <p class="change_color" id="first">我要變顏色</p>
    </body>

那我們要如何選到我們要的id呢？
之前class前面加「.」，現在id前面加「#」就可以囉。

像這樣 id="third" 的就會有 font-size: 24px; 的樣式

    <style>
        #third {
            font-size: 24px;
        }
    </style>
    <body>
        <p class="change_font" id="first">我是要被拿來當實驗品的文字</p>
        <p class="no_change" id="second">我是不想變色的文字</p>
        <p class="change_font" id="third">我也要加大</p>
        <p class="change_color" id="fourth">我要變顏色</p>
    </body>